import React, { Suspense,lazy } from 'react';
import { connect } from 'react-redux';
import { Layout, Menu, Dropdown, Avatar } from 'antd';
import { Route, Switch } from 'react-router-dom';

import SeoContainer from '&components/seo-container';
import Header from '&widgets/header';
import Sider from '&widgets/sider';


import MemberList from '../subPages/memberList';
import UnitList from '../subPages/unitList';
import AlertList from '../subPages/alertList';
import NewHotMap from '../subPages/newHotMap';
import Setting from '../subPages/setting';
import AdminHotMap from '../home/admin/hotmaps'
// const MkEage = lazy(() => import ('../setEqMessage/index'))
// const UtEage = lazy(()=>import('../setUTMessage/index'))
import MkEage from '../setEqMessage/index'
import UtEage from '../setUTMessage/index'
import styles from './styles.module.less';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

const { Content } = Layout;
const initialPanes = [
    { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
    { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    {
      title: 'Tab 3',
      content: 'Content of Tab 3',
      key: '3',
      closable: false,
    },
  ];
const mapStateToProps = (state) =>({
    
})
export default  (() => {
    return (
        <SeoContainer title="管理员界面">
            <Layout>
                <Sider/>
                <Layout>
                    <Header/>
                    <Content>
                        <div className={ styles.interviewArticle }>
                            {/* <Suspense fallback={<div>loading</div>}> */}
                                <Switch>
                                    <Route path="/admin/member-list"  render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            // key={}
                                            closable
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"成员列表"}>
                                                {React.createElement(MemberList)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    <Route path="/admin/new-hotMap" render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            closable
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"新建热点图"}>
                                                {React.createElement(NewHotMap)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    <Route path="/admin/setting" render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            closable
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"设置"}>
                                                {React.createElement(Setting)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    <Route path="/admin/unit-list"  render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            closable
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"单位列表"}>
                                                {React.createElement(UnitList)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    <Route path="/admin/alert-list"  render={()=>{
                                        return (<Tabs
                                            type="editable-card"
                                            closable
                                            // onChange={this.onChange}
                                            // activeKey={activeKey}
                                            // onEdit={this.onEdit}
                                          >
                                            {
                                              <TabPane tab={"报警列表"}>
                                                {React.createElement(AlertList)}
                                              </TabPane>
                                            }
                                          </Tabs>)
                                    }}/>
                                    <Route path='/admin/setFsmMessage'   component={MkEage}/>
                                    <Route path='/admin/setUtMessage'   component={UtEage}/>
                                    <Route path="/admin/AdminHotMap" component={AdminHotMap}/>
                                    {/* <Route path={`/SetMessage/?${this.props.equipmentId}`} component={MkEage}/> */}
                                    {/* <Route path="/admin/create-hotmaps" component={CreateHotMaps}/>
                                        <Route path="/admin/member-list" component={MemberList}/>
                                        <Route path="/admin/hotmaps" component={AdminHotMap}/>
                                        <Route path="/admin/organization-list" component={OrganizationList}/>
                                        <Route path="/admin/setting" component={AdminSetting}/>
                                        <Route path="/common/alert-list" component={AlertList}/>
                                        <Route path="/user/hotmaps" component={UserHotMaps}/>
                                        <Route path="/user/photo-album" component={PhotoAlbum}/> */}
                                </Switch>
                            {/* </Suspense> */}
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </SeoContainer>
    )
})

